<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<p>a={{a}},b={{b}},c={{c}}</p>
			<p>插值表达式计算：{{a*b+b*c+a*c}}</p>
			<p>计算属性：{{result}}</p>
			<h1>练习：</h1>
			圆的半径：<input type="text" v-model="r"/>
			<p>周长为：{{circle_length}}</p>
			<h1>例子：</h1>
			姓：<input type="text" v-model="firstName" />
			名：<input type="text" v-model="lastName" />
			全称：<p>{{fullName}}</p>
			<h1>例子：筛选</h1>
			<ul>
				<li v-for="stu in passStudent">
					{{stu.name}},{{stu.score}}
				</li>
			</ul>
			<hr/>
			<ul>
				<li v-for="stu in unpassStudent">
					{{stu.name}},{{stu.score}}
				</li>
			</ul>
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						a: 10,
						b: 20,
						c: 30,
						r: '',
						firstName: '',
						lastName: '',
						stus: [
							{name:"张1",score:59},
							{name:"张2",score:92},
							{name:"张3",score:46},
							{name:"张4",score:68},
							{name:"张5",score:87},
							{name:"张6",score:79}
						]
					}
				},
				computed:{
					passStudent(){
						return this.stus.filter(s=>s.score >= 60);
					},
					unpassStudent(){
						return this.stus.filter(s=>s.score < 60);
					},
					result(){
						return this.a*this.b+this.a*this.c+this.b*this.c
					},
					circle_length(){
						return this.r * 2 * 3.14
					},
					fullName(){
						return this.firstName + "" + this.lastName
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
